#about {
    display:     none;
    position:    fixed;
    top:         0;
    left:        0;
    width:       100%;
    height:      100%;
    background:  map-get($about, background);
    text-align:  center;
    line-height: 100%;
    overflow-y:  auto;
    overflow-x:  hidden;
    cursor:      pointer;
    z-index:     map-get($z-indexes, l-about);

    #about-card {
        position:      relative;
        // Position the card out the page to improve the javascript drop effect
        top:           -1000px;
        display:       block;
        background:    white;
        max-width:     400px;
        margin:        15px auto;
        border-radius: 3px;
        padding:       30px 0;
        cursor:        initial;
        @include prefix(box-shadow, 0 0 5px rgba(0, 0, 0, 0.50), 'webkit' 'moz');

        #about-btn-close {
            position: absolute;
            top:      15px;
            right:    15px;
            color:    map-get($colors, light);
            cursor:   pointer;

            &:hover {
                color: darken(map-get($colors, light), 15);
            }
        }
        #about-card-picture {
            margin-bottom: 15px;
        }
        #about-card-name {
            margin-top:    0;
            margin-bottom: 20px;
        }
        #about-card-bio {
            padding: 0 30px;
            margin:  0 0 30px 0;
        }
        #about-card-job,
        #about-card-location {
            display:        inline-block;
            vertical-align: top;
        }
        #about-card-job,
        #about-card-location,
        #about-card-bio {
            font-size:   $font-size-base;
            line-height: $line-height-base;
            font-weight: 400;
            color:       map-get($colors, base);
        }
    }
}

// Improve responsiveness of about card on small screen and down
@media #{$small-and-down} {
    #about {
        #about-card {
            width: 90%;

            #about-card-job,
            #about-card-location {
                display: block;
                width:   calc(100% - 60px); // 60px = padding right + padding left of `#about-card`
                padding: 0 30px;
            }
            #about-card-picture {
                width:         90px;
                height:        90px;
                border-radius: 45px;
            }
            #about-card-job {
                margin-bottom: 15px;
            }
        }
    }
}

// Improve responsiveness of about card on medium screen and up
@media #{$medium-and-up} {
    #about {
        #about-card {
            width: 80%;
            #about-card-picture {
                width:         110px;
                height:        110px;
                border-radius: 55px;
            }
            #about-card-job,
            #about-card-location {
                display: inline-block;
                // 48px =  padding right of `#about-card-job` + `#about-card-location`
                width:   calc((100% / 2) - 48px);
            }
            #about-card-job {
                padding: 0 15px 0 30px;
            }
            #about-card-location {
                padding: 0 30px 0 15px;
            }
        }
    }
}